<template>
  <div >
    <!-- 明细页面 -->
    <div>
      <!-- 基盘客户信息 -->
      <FormPanel
        ref="formPanel"
        :list="formList1"
        :cols="4"
        :formType="type"
        labelWidth="80"
        :isSubmitBtn="false"
        @formChange="formChangeHandle"
      />
    </div>
      <!-- 已购车辆 -->
      <BreakSpace label="已购车辆" :containerStyle="{ marginBottom: '10px' }"/>
      <FilterTable
        ref="table"
        :columns="columns1"
        height="auto"
        :dataSource="bugCarList"
        :isPagination='false'
        :isSelectColumn='false'
        :onRowSelectChange="selectChangeHandle"
        :onColumnsChange="columns1 => this.columns1 = columns1"
      ></FilterTable>
      <!-- 联系人信息 -->
      <BreakSpace label="联系人信息" :containerStyle="{ marginBottom: '10px' }"/>
      <FilterTable
        ref="table"
        :columns="columns2"
        height="auto"
        :dataSource="customerList"
        :isPagination='false'
        :isSelectColumn='false'
        :onColumnsChange="columns2 => this.columns2 = columns2"
      >
      <template slot="controls" slot-scope="props">
        <el-button size="small" type="primary" v-show="isEditCus" @click="addHandle">新增</el-button>
      </template>
      </FilterTable>
      <BaseDialog
        :visible.sync="visibleLX"
        :title="dialogTitle"
        destroyOnClose
        :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
      >
        <addContact :type="handleType" :rowData="formDataLX" :contantypeList="contantypeList" @close="closeHandler" @contactHandle="contactHandle"/>
      </BaseDialog>
      <!-- 删除联系人 -->
      <BaseDialog
        :visible.sync="delVisible"
        title="删除"
        :type="handleType"
        :rowData="formData_del"
        width="30%"
        center>
        <span>确定要删除吗?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeVisible">取 消</el-button>
          <el-button type="primary" @click="deleteSubmit">确 定</el-button>
        </span>
      </BaseDialog>
      <!-- 保有车辆 -->
      <BreakSpace label="保有车辆" :containerStyle="{ marginBottom: '10px' }"/>
      <FilterTable
        ref="table"
        :columns="columns3"
        height="auto"
        :dataSource="keepCarList"
        :isPagination='false'
        :isSelectColumn='false'
        selectionType="single"
        :onColumnsChange="columns3 => this.columns3 = columns3"
      ></FilterTable>
      <!-- 更多信息 -->
      <FormPanel
        ref="formPanel2"
        :list="formList2"
        :cols="4"
        :formType="type"
        labelWidth="90"
        :isSubmitBtn="false"
        @formChange="formChangeHandle"
      />

  </div>
</template>

<script>
import {
  getBaseInfoById,
  getBaseContactList,
  addBaseContact,
  editBaseContact,
  deleteBaseContact,
  auditDistPotentialDetail
} from '@/api/potenCus/customer/cust1Manage';
import { getDataType } from '@/assets/js/auth';
import { dictionary } from '@/utils/dictMixin';
import { formatDates, formatDuring, formatDat, BASEDATACode } from '@/utils/validate';
import addContact from './addDiaolg/addContact';

export default {
  name: 'baseInfo',
  mixins: [dictionary],
  components: {
    addContact
  },
  props: {
    type: {
      type: String,
      default: 'show'
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    this.saveData = null;
    return {
      bugCarList:[],  //已购车辆
      customerList:[],  //联系人
      keepCarList:[],    //竞品车型
      formList1: this.createFormList1(),
      formList2: this.createFormList2(),
      fetchParams1: {},
      columns1: this.createTableColumns1(),
      fetchParams2: {},
      columns2: this.createTableColumns2(),
      fetchParams3: {},
      columns3: this.createTableColumns3(),
      visibleLX: false,
      formDataLX: {},
      handleType: '',
      delVisible: false,
      dialogTitle: '',
      formData_del: {},
      contantypeList: this.createDictList('7034'),
      conf:{ add: '新增', edit: '编辑' },
      isEditCus: true
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      console.log(this.rowData,this.type,"让我看看是什么")
      console.log(this.rowData.isShowCustomer,"能不能操作联系人就看你了")
      if (this.type === 'show') {
        // 更新接口需要的记录 ID
        console.log(this.rowData,"this.rowData.")
        this.actionId = this.rowData.actionId
        this.potentialCustomerId = this.rowData.potentialCustomersId
        this.customerBusinessId = this.rowData.customerBusinessId

        auditDistPotentialDetail(this.actionId,this.potentialCustomerId,this.customerBusinessId).then(res=>{
          console.log(res,"明细")
          this.formList1.forEach(x => {
            x.initialValue = res.data[x.fieldName];
          });
          this.formList1.find(item=>item.fieldName == "level").initialValue = Number(res.data.level)
          this.formList1.find(item=>item.fieldName == "dateOfBirth").initialValue = formatDates(res.data.dateOfBirth)

          // 已购车辆
          this.bugCarList=res.data.salesOrderInfoVOS
          // 联系人信息
          this.customerList=res.data.customerContactinfoDTO
          // 保有车辆
          this.keepCarList=res.data.keepingVehiclesDTO
          //更多信息
          this.formList2.forEach(x => {
            x.initialValue = res.data[x.fieldName];
          });
        })
        // 销售回访跳转 禁止操作联系人
        if(this.rowData.isShowCustomer == 10041001){
          this.isEditCus = false
          this.columns2.find(x => x.dataIndex ==='column-action').hidden = true
        }
      }
    },
    selectChangeHandle(rows) {
      if (!rows.length) return;
      this.selectedRow = rows[0];
    },
    // 基盘客户信息
    createFormList1() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '基盘客户信息',
          style: {}
        },
        {
          type: 'INPUT',
          label: '客户编号',
          fieldName: 'potentialCustomerNo',
          placeholder: ''
        },
        {
          type: 'SELECT',
          label: '客户类型',
          fieldName: 'customerType',
          placeholder: '',
          itemList: this.createDictList('1523'),
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'customerName',
          placeholder: ''
        },
        {
          type: 'SELECT',
          label: '证件类型',
          fieldName: 'ctCode',
          placeholder: '',
          itemList: this.createDictList('1508'),
        },
        {
          type: 'INPUT',
          label: '证件号码',
          fieldName: 'certificateNo',
          placeholder: '',
        },
        {
          type: 'DATE',
          label: '出生日期',
          fieldName: 'dateOfBirth',
          placeholder: '',
          dateType:"exactdate",
          valueFormat: 'yyyy-MM-dd',
        },
        {
          type: 'INPUT',
          label: '地址',
          selfCols: 2,
          fieldName: 'billingAddress',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '联系人',
          fieldName: 'contactName',
          placeholder: '',
        },
        {
          type: 'INPUT',
          label: '联系人电话',
          fieldName: 'phone',
          placeholder: '',
        },
        {
          type: 'SELECT',
          label: '销售顾问',
          fieldName: 'consultantName',
          placeholder: '',
          itemList: [],
        },
        {
          type: 'INPUT',
          label: '已购车辆(台)',
          fieldName: 'purchased',
          placeholder: '',
        },
        {
          type: 'INPUT',
          label: '续购(台)',
          fieldName: 'renewal',
          placeholder: '',
        },
        {
          type: 'INPUT',
          label: '转介绍(台)',
          fieldName: 'introduction',
          placeholder: '',
        },
        {
          type: 'SELECT',
          label: '客户等级',
          fieldName: 'level',
          placeholder: '',
          itemList: this.createDictList('7049'),
        },
      ]
    },
    // 更多信息
    createFormList2() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '更多信息',
          style: {}
        },
        {
          type: 'SELECT',
          label: '教育程度',
          fieldName: 'educationalLevel',
          placeholder: '',
          itemList: this.createDictList('7027'),
        },
        {
          type: 'SELECT',
          label: '婚姻状况',
          fieldName: 'maritalStatus',
          placeholder: '',
          itemList: this.createDictList('7028'),
        },
        {
          type: 'INPUT_NUMBER',
          label: '家庭成员(人)',
          fieldName: 'familyNum',
          placeholder: '',
        },
        {
          type: 'SELECT',
          label: '个人爱好',
          fieldName: 'avocation',
          placeholder: '',
          itemList: this.createDictList('7032'),
        },
        {
          type: 'SELECT',
          label: '企业性质',
          fieldName: 'enterpriseType',
          placeholder: '',
          itemList: this.createDictList('7029'),
        },
        {
          type: 'SELECT',
          label: '所属行业',
          fieldName: 'industry',
          placeholder: '',
          itemList: this.createDictList('7030'),
        },
        {
          type: 'SELECT',
          label: '职务',
          fieldName: 'postName',
          placeholder: '',
          itemList: this.createDictList('7031'),
        },
        {
          type: 'INPUT',
          label: '备注',
          fieldName: 'clueSourceRemark',
          selfCols: 3,
          placeholder: ''
        },
      ];
    },
    // 已购车辆
    createTableColumns1() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '潜客名称',
          dataIndex: 'customerName',
          filterType: 'input'
        },
        {
          title: '手机号码',
          dataIndex: 'invoiceMobile',
          filterType: 'input'
        },
        {
          title: '销售单号',
          dataIndex: 'viNo',
          width: 200,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'salesVin',
          filterType: 'input',
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          filterType: 'input'
        },
        {
          title: '配置',
          dataIndex: 'packageName',
          filterType: 'input',
          width: 200
        },
        {
          title: '颜色',
          dataIndex: 'colorName',
          filterType: 'input',
        },
        {
          title: '失效状态',
          dataIndex: 'failureCode',
          filterType: 'checkbox',
          filterItems: this.createDictList('7051'),
          render: props => {
            return <span>{this.createDictText(props.row.failureCode, '7051')}</span>;
          }
        },
        {
          title: '车辆价格',
          dataIndex: 'vehiclePrice',
          filterType: 'input'
        },
        {
          title: '出库日期',
          dataIndex: 'stockInOutDate',
          filterType: 'input',
          render: props => {
            return <span>{ formatDat(props.row.stockInOutDate) }</span>;
          }
        },
        {
          title: '车辆使用地',
          dataIndex: 'useAddress',
          filterType: 'input'
        },
      ];
    },
    // 联系人信息
    createTableColumns2() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 90,
          fixed: 'left',
          hidden: false,
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" divider="after" type="text" onClick={() => this.editHandle(props.row)}>
                  编辑
                </el-button>
                <el-button size="mini" type="text" disabled={props.row.isMain == 10041001?true:false} onClick={() => this.deleteHandle(props.row)}>
                  删除
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '联系人姓名',
          dataIndex: 'contactName',
          filterType: 'input'
        },
        {
          title: '联系人手机号',
          dataIndex: 'contactorPhone',
          filterType: 'input'
        },
        {
          title: '联系人性别',
          dataIndex: 'gender',
          filterType: 'checkbox',
          filterItems: this.createDictList('1002'),
          render: props => {
            return <span>{this.createDictText(props.row.gender, '1002')}</span>;
          }
        },
        {
          title: '联系人类型',
          dataIndex: 'contactType',
          filterType: 'checkbox',
          filterItems: this.createDictList('7034'),
          render: props => {
            return <span>{this.createDictText(props.row.contactType, '7034')}</span>;
          }
        },
        {
          title: '关系',
          dataIndex: 'contactRelation',
          filterType: 'checkbox',
          filterItems: this.createDictList('1534'),
          render: props => {
            return <span>{this.createDictText(props.row.contactRelation, '1534')}</span>;
          }
        },
        {
          title: '联系备注',
          dataIndex: 'contactRemark',
          filterType: 'input'
        },
      ];
    },
    // 保有车辆
    createTableColumns3() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '品牌',
          dataIndex: 'keepVehiclesBrand',
          filterType: 'input'
        },
        {
          title: '车系',
          dataIndex: 'keepVehiclesSeries',
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'keepVehiclesModel',
          filterType: 'input'
        },
        {
          title: '配置',
          dataIndex: 'PackageName',
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          filterType: 'input'
        },
        {
          title: '购买日期',
          // dataIndex: 'buyData',
          dataIndex: 'buyDate',
          filterType: 'input',
          render: props => {
            return <span>{ formatDat(props.row.buyDate) }</span>;
          }
        },
        {
          title: '已购车龄(天)',
          dataIndex: 'boughtCarsAge',
          filterType: 'input'
        },
        {
          title: '行驶里程(KM)',
          dataIndex: 'drivingMileage',
          filterType: 'input'
        },
        {
          title: '备注',
          dataIndex: 'isDeleted',
          filterType: 'input'
        },
      ];
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    addHandle() {
      this.handleType = 'add';
      this.formDataLX = this.rowData
      this.showHandler();
    },
    editHandle(row) {
      console.log('编辑row', row);
      this.handleType = 'edit';
      this.formDataLX = row;
      this.showHandler();
    },
    deleteHandle(row) {
      console.log('删除row', row);
      this.handleType = 'delete';
      this.formData_del = row;
      this.delVisible = true;
    },
    async deleteSubmit(){
      console.log(this.formData_del,"this.formData_del")
      const res = await deleteBaseContact(this.formData_del.contactId)
      console.log('删除', res)
      if(res.resultCode === 200){
        this.closeVisible();
        // this.fetchParams = { ...this.fetchParams };
        this.$message.success("删除成功!");
        this.init();
      }
    },
    showHandler(){
      this.dialogTitle = `联系人${this.conf[this.handleType]}`;
      this.visibleLX = true
    },
    closeVisible(){
      this.delVisible = false;
    },
    closeHandler(val, type) {
      this.visibleLX = val;
      this.init();
      if (type === 'refresh') {
        // 重新加载
        this.getContactList()
        this.fetchParams = { ...this.fetchParams };
      }
    },
    // 联系人附带数据
    contactHandle(data){
      console.log("联系人",data)
    },
    // 联系人列表
    async getContactList(){
      const res = await getBaseContactList(this.potentialCustomerId);
      console.log('联系人列表', res)
      this.customerList.forEach(x =>{
        x.initialValue = res.data[x.fieldName];
      })
    },
    // 获取编辑明细
    async getBaseInfoList() {
      // const res = await getBaseInfoById(2543, 610, 70241002);
      const res = await getBaseInfoById(this.actionId, this.potentialCustomerId, this.customerBusinessId);
      console.log('明细', res);
      if (res.resultCode === 200) {
        this.formList1.forEach(x => {
          x.initialValue = res.data[x.fieldName];
        });
        this.formList2.forEach(x => {
          x.initialValue = res.data[x.fieldName];
        });
        // 已购车辆
        if(res.data.salesOrderInfoVOS.length){
          this.bugCarList = res.data.salesOrderInfoVOS
        }
        // 联系人
        if(res.data.customerContactinfoDTO.length){
          this.customerList = res.data.customerContactinfoDTO
        }
        // 保有车辆
        if(res.data.KeepingVehiclesDTO.length){
          this.keepCarList = res.data.KeepingVehiclesDTO
        }
      }
    },
    closeDialog(param) {
      this.$emit('close', false, param);
    },

  }
};
</script>

<style lang="less" scoped>

</style>

